<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-form :inline="true" :model="queryForm" size="small" ref="queryForm" class="demo-form-inline">
					<el-form-item label="商品名称:" prop="gsName">
						<el-input v-model="queryForm.gsName" placeholder="商品名称"></el-input>
					</el-form-item>

					<el-form-item>
						<div class="block">
							<span class="demonstration">促销活动开始时间: </span>
							<el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期"
								:picker-options="pickerOptions">
							</el-date-picker>
						</div>
					</el-form-item>

					<el-form-item>
						<div class="block">
							<span class="demonstration">希望价格生效时间: </span>
							<el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期"
								:picker-options="pickerOptions">
							</el-date-picker>
						</div>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" size="mini" @click="searchTableData()" icon="el-icon-search" plain>搜索</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetOneQueryForm()" plain>重置 </el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="24">
				<div class="grid-content bg-purple">
					<el-table ref="tableData" :data="tableData" tooltip-effect="dark">
						<el-table-column prop="activityId" label="编号" min-width="35%" align="center"></el-table-column>
						<el-table-column prop="activityName" label="活动名称" align="center">
						</el-table-column>
						<el-table-column prop="activityBeginTime" label="促销活动开始时间" align="center">
						</el-table-column>
						<el-table-column prop="shopPrice" label="商城价格" align="center"></el-table-column>
						<el-table-column prop="priceOperantTime" label="希望价格生效时间" align="center">
						</el-table-column>
						<el-table-column prop="operate" label="操作" align="center">
							<template slot-scope="scope">
								<el-button type="warning" icon="el-icon-view" @click="AuditClick(scope.row)" size="mini" plain>审核
								</el-button>
								<el-button type="success" icon="el-icon-edit" @click="AuditTrailClick(scope.row)" size="mini" plain>
									审核跟踪
								</el-button>
							</template>
						</el-table-column>
					</el-table>

					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="queryForm.pageNum" :page-sizes="[3, 5, 8,10]" :page-size="queryForm.pageSize"
						layout="->, total, sizes, prev, pager, next, jumper" :total="totalNum">
					</el-pagination>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				totalNum: [],
				tableData: [],
				queryForm: {
					id: '',
					gsName: '',
					activityId: '',
					activityName:'',
					activityBeginTime:'',
					shopPrice:'',
					priceOperantTime:'',
					
					
					
				},
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}

					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				value1: '',
				value2: '',
			};
		},

		methods: {
			searchTableData() { //搜索按钮

			},
			resetOneQueryForm() { //搜索重置框

			},

			AuditTrailClick() { //审核跟踪按钮

			},
			AuditClick() { //审核按钮

			},

			//改变每页显示的条数
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
				this.queryForm.pageNum = 1;
				this.getSelectTableData(this.queryForm);
			},

			// 翻页
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
				this.getSelectTableData(this.queryForm);
			},

			getSelectTableData(search) { //查询所有页面信息加活动的一些信息和分页
				this.$axios.get("activity/selectActivityAll", {
					params: search
				}).then(resp => {
					this.tableData = resp.list;
					this.totalNum = resp.total;
				})
			},

		},
		mounted() {
			this.getSelectTableData(this.queryForm);




		},
	};
</script>

<style>
</style>
